<!DOCTYPE HTML>
<!--
/*
 * JavaScript Load Image Demo 1.5
 * https://github.com/blueimp/JavaScript-Load-Image
 *
 * Copyright 2011, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */
-->
<html lang="en">
<head>
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta charset="utf-8">
<title>JavaScript Load Image</title>
<meta name="description" content="JavaScript Load Image is a function to load images provided as File or Blob objects or via URL. It returns an optionally scaled HTML img or canvas element.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
<style>body{padding-top:60px;}</style>
<link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-ie6.min.css"><![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="https://github.com/blueimp/JavaScript-Load-Image">JavaScript Load Image</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="#">Demo</a></li>
                    <li><a href="https://github.com/blueimp/JavaScript-Load-Image/downloads">Downloads</a></li>
                    <li><a href="https://github.com/blueimp/JavaScript-Load-Image">Source Code</a></li>
                    <li><a href="https://github.com/blueimp/JavaScript-Load-Image">Documentation</a></li>
                    <li><a href="https://github.com/blueimp/JavaScript-Load-Image/issues">Issues</a></li>
                    <li><a href="test/">Test</a></li>
                    <li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="page-header">
        <h1>JavaScript Load Image Demo</h1>
    </div>
    <blockquote>
        <p><a href="https://developer.mozilla.org/en/JavaScript/">JavaScript</a> Load Image is a function to load images provided as <a href="https://developer.mozilla.org/en/DOM/File">File</a> or <a href="https://developer.mozilla.org/en/DOM/Blob">Blob</a> objects or via URL.<br>
            It returns an optionally <strong>scaled</strong> and/or <strong>cropped</strong> HTML <a href="https://developer.mozilla.org/en/docs/HTML/Element/Img">img</a> or <a href="https://developer.mozilla.org/en/docs/HTML/Canvas">canvas</a> element.<br></p>
    </blockquote>
    <br>
    <div class="row">
        <div class="span5">
            <h2>Select an image file</h2>
            <p><input type="file" id="file-input"></p>
            <p><span class="label label-info">Notice</span> Or <strong>drag &amp; drop</strong> an image file onto this webpage.</p>
        </div>
        <div class="span7">
            <h2>Result</h2>
            <div class="well" id="result"><p><span class="label label-warning">Notice</span> This demo works only in browsers with support for the <a href="https://developer.mozilla.org/en/DOM/window.URL">URL</a> or <a href="https://developer.mozilla.org/en/DOM/FileReader">FileReader</a> API.</p></div>
        </div>
    </div>
</div>
<script src="load-image.min.js"></script>
<!-- jQuery is not required, but included for the demo -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
/*global jQuery, window, document, HTMLCanvasElement */
(function ($) {
    'use strict';
    var result = $('#result'),
        load = function (e) {
            e = e.originalEvent;
            e.preventDefault();
            if (!window.loadImage(
                    (e.dataTransfer || e.target).files[0],
                    function (img) {
                        if (!(img.src || img instanceof HTMLCanvasElement)) {
                            img = $('<div><span class="label label-important">Error</span>' +
                                    ' <span>Loading image file failed</span></div>');
                        }
                        result.children().replaceWith(img);
                    },
                    {
                        maxWidth: result.children().outerWidth(),
                        canvas: true
                    }
                )) {
                result.children().replaceWith(
                    $('<div><span class="label label-important">Error</span>' +
                        ' <span>Your browser does not support the URL or FileReader API.</span></div>')
                );
            }
        };
    $(document)
        .on('dragover', function (e) {
            e = e.originalEvent;
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy';
        })
        .on('drop', load);
    $('#file-input').on('change', load);
}(jQuery));
</script>
</body> 
</html>
